﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "个人设置";
}
 
<el-row :gutter="20">
    <el-col :span="8">
        <div class="settings-container">
        <el-form :model="form" label-width="180px" ref="settingsForm">
            <!-- 基础信息 -->
            <el-form-item label="身高(/厘米)" prop="height">
                <el-input-number v-model="form.height" :size="size"
                                 :min="100"
                                 :max="250"
                                 :step="1"
                                 :precision="0"
                                 placeholder="请输入身高(cm)"></el-input-number>
            </el-form-item>

            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender" :size="size">
                    <el-radio v-for="item in genderOptions"
                              :key="item.value"
                              :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker v-model="form.birthDate" :size="size"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                :picker-options="datePickerOptions">
                </el-date-picker>
            </el-form-item>

@*             <!-- 单位系统 -->
            <el-form-item label="单位系统" prop="unitSystem">
                <el-select v-model="form.unitSystem" placeholder="请选择" :size="size">
                    <el-option v-for="item in unitOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> *@

            <!-- 健康目标 -->
            <el-form-item label="健康目标" prop="healthGoal">
                    <el-select v-model="form.healthGoal" placeholder="请选择" :size="size" clearable>
                    <el-option v-for="item in goalOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="每周目标变化量" prop="weeklyGoal" v-if="form.healthGoal !== 3">
                <el-input-number v-model="form.weeklyGoal" :size="size"
                                 :min="0.1"
                                 :max="2"
                                 :step="0.1"
                                 :precision="1"></el-input-number>
                <span class="unit">{{ form.unitSystem === 1 ? 'kg/周' : 'lb/周' }}</span>
            </el-form-item>

            <!-- 活动水平 -->
            <el-form-item label="活动水平" prop="activityLevel">
                <el-select v-model="form.activityLevel" placeholder="请选择" :size="size">
                    <el-option v-for="item in activityOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- 提醒设置 -->
            <el-form-item label="每日测量提醒" prop="enableReminder">
                <el-switch v-model="form.enableReminder" :size="size"></el-switch>
            </el-form-item>

            <el-form-item label="提醒时间" prop="reminderTime" v-if="form.enableReminder">
                <el-time-picker v-model="form.reminderTime" :size="size"
                                format="HH:mm"
                                value-format="HH:mm"
                                placeholder="选择时间">
                </el-time-picker>
            </el-form-item>

            <!-- 通知偏好 -->
            <el-form-item label="接收每周报告" prop="receiveWeeklyReport">
                <el-switch v-model="form.receiveWeeklyReport" :size="size"></el-switch>
            </el-form-item>

            <el-form-item label="接收异常趋势提醒" prop="receiveTrendAlerts">
                <el-switch v-model="form.receiveTrendAlerts" :size="size"></el-switch>
            </el-form-item>

            <!-- 数据分享 -->
            <el-form-item label="数据分享设置" prop="dataSharing">
                <el-radio-group v-model="form.dataSharing" :size="size">
                    <el-radio :label="0">不分享</el-radio>
                    <el-radio :label="1">匿名分享</el-radio>
                    <el-radio :label="2">公开分享</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @@click="submitForm" :size="size">保存设置</el-button>
                <el-button @@click="resetForm" :size="size">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    </el-col>
</el-row>
@section Scripts {
    
    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    size:formOption.size,
                    form: {
                      height: null,
                      gender: null,
                      birthDate: null,
                      unitSystem: 1,
                      healthGoal: 3,
                      weeklyGoal: 0.5,
                      activityLevel: 2,
                      reminderTime: '08:00',
                      enableReminder: true,
                      receiveWeeklyReport: true,
                      receiveTrendAlerts: true,
                      dataSharing: 0
                    },
                    genderOptions: [
                      { label: '男', value: 1 },
                      { label: '女', value: 2 }
                    ],
                    unitOptions: [
                      { label: '公制(kg/cm)', value: 1 },
                      { label: '英制(lb/inch)', value: 2 }
                    ],
                    goalOptions: [
                      { label: '减重', value: 1 },
                      { label: '增重', value: 2 },
                      { label: '维持', value: 3 },
                      { label: '增肌', value: 4 }
                    ],
                    activityOptions: [
                      { label: '久坐(几乎不运动)', value: 1 },
                      { label: '轻度活动(每周1-3天)', value: 2 },
                      { label: '中度活动(每周3-5天)', value: 3 },
                      { label: '高度活动(每周6-7天)', value: 4 },
                      { label: '运动员(每天高强度)', value: 5 }
                    ],
                    datePickerOptions: {
                      disabledDate(time) {
                        return time.getTime() > Date.now();
                      }
                    }
              }
          },
          methods: {
            async loadSettings() {
              try {
                const res = await this.$http.get('/usersettings/info');
                console.log("res=====",res)
                if (res) {
                  this.form = res;
                }
              } catch (error) {
                this.$message.error('加载设置失败: ' + error.message);
              }
            },
            async submitForm() {
              try {
                await this.$http.post('/usersettings/update', this.form);
                this.$message.success('设置保存成功');
              } catch (error) {
                this.$message.error('保存失败: ' + error.message);
              }
            },
            resetForm() {
              this.$refs.settingsForm.resetFields();
            }
          },
          created() {
            this.loadSettings();
          }
        });
    </script>
}
<style scoped>
    .settings-container {
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
    }

    .unit {
        margin-left: 10px;
        color: #606266;
    }
</style>
